import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const iFrameDocs= { source: { code: `component.NewIFrame("https://octant.dev", "title")`}};

export const iFrameView= {
  config: {
    url: 'https://octant.dev',
    title: 'title',
  },
  metadata: {
    type: 'iframe',
  },
};

export const IFrameStoryTemplate = args => ({
  template: `<div style= "height: 500px;"><app-iframe [view]= "view"></app-iframe></div>`,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>IFrame component</h1>
<h2>Description</h2>

<p>The IFrame components allows embedding of another webpage with a URL</p>
<h2>Example</h2>

<Meta title="Components/IFrame" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="IFrame component"
         parameters={{ docs: iFrameDocs }}
         height="550px"
         args= {{ view: iFrameView, }}>
    { IFrameStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "IFrame component" />
